<script setup>
  import { ref } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import { patientListApi, removePatientApi } from '@/services/inquiry.js'
  import consult from '@/store/consult.js'
  const consultStore = consult()
  // 是否显示页面内容
  // const pageShow = ref(false)
  // 患者列表
  const patinetList = ref([])

  // 侧滑按钮配置
  const swipeOptions = ref([
    {
      text: '删除',
      style: {
        backgroundColor: '#dd524d'
      }
    }
  ])
  const goForm = (id) => {
    uni.navigateTo({
      url: `/subpkg_archive/form/index?id=${id}`
    })
  }
  // 生命周期（页面显示）
  // onShow(() => {
  getPatientList()
  // })

  // 家庭档案（患者）列表
  async function getPatientList() {
    // 患者列表接口
    const res = await patientListApi()
    // 渲染接口数据
    patinetList.value = res.data.data
    consultStore.setPatientId(patinetList.value[0].id)
    // 展示页面内容
    // pageShow.value = true
  }
  //去预支付
  const goPayment = () => {
    uni.navigateTo({
      url: '/subpkg_consult/payment/index'
    })
  }

  //删除
  const del = async (id, index) => {
    await removePatientApi(id)
    patinetList.value.splice(index, 1)
  }
</script>
<template>
  <scroll-page>
    <view class="patient-page">
      <view class="page-header">
        <view class="patient-title">请选择患者信息</view>
        <view class="patient-tips">
          以便医生给出更准确的治疗，信息仅医生可见
        </view>
      </view>
      <uni-swipe-action>
        <uni-swipe-action-item
          v-for="(v, i) in patinetList"
          :key="v.id + '_' + v.defaultFlag"
          :right-options="swipeOptions"
          @click="del(v.id, i)"
        >
          <view
            class="archive-card"
            :class="{ active: v.id == consultStore.patientId }"
            @click="consultStore.setPatientId(v.id)"
          >
            <view class="archive-info">
              <text class="name">{{ v.name }}</text>
              <text class="id-card">{{ v.idCard }}</text>
              <text class="default" v-if="v.defaultFlag === 1">默认</text>
            </view>
            <view class="archive-info">
              <text class="gender">{{ v.gender ? '男' : '女' }}</text>
              <text class="age">{{ v.age }}岁</text>
            </view>
            <view
              hover-class="none"
              class="edit-link"
              @click.stop="goForm(v.id)"
            >
              <uni-icons
                type="icon-edit"
                size="20"
                color="#16C2A3"
                custom-prefix="iconfont"
              />
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <!-- 添加按钮 -->
      <view v-if="true" class="archive-card">
        <navigator
          class="add-link"
          hover-class="none"
          url="/subpkg_archive/form/index"
        >
          <uni-icons color="#16C2A3" size="24" type="plusempty" />
          <text class="label">添加患者</text>
        </navigator>
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" @click="goPayment">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  .patient-page {
    padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 200rpx);
  }

  .page-header {
    margin-top: 20rpx;
    margin-bottom: 40rpx;
  }

  .patient-title {
    font-size: 36rpx;
    color: #121826;
  }

  .patient-tips {
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #6f6f6f;
  }

  .archive-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;

    height: 180rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    box-sizing: border-box;
    border: 1rpx solid transparent;
    background-color: #f6f6f6;

    &.active {
      background-color: rgba(44, 181, 165, 0.1);
      // border: 1rpx solid #16c2a3;
    }

    .archive-info {
      display: flex;
      align-items: center;
      color: #6f6f6f;
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }

    .name {
      margin-right: 30rpx;
      color: #121826;
      font-size: 32rpx;
      font-weight: 500;
    }

    .id-card {
      color: #121826;
    }

    .gender {
      margin-right: 30rpx;
    }

    .default {
      height: 36rpx;
      line-height: 36rpx;
      text-align: center;
      padding: 0 12rpx;
      margin-left: 30rpx;
      border-radius: 4rpx;
      color: #fff;
      font-size: 24rpx;
      background-color: #16c2a3;
    }
  }

  .edit-link {
    position: absolute;
    top: 50%;
    right: 30rpx;

    transform: translateY(-50%);
  }

  .add-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .label {
      margin-top: 10rpx;
      font-size: 28rpx;
      color: #16c2a3;
    }
  }

  .next-step {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
    background-color: #fff;
  }

  :deep(.uni-swipe_button-group) {
    bottom: 30rpx;
  }
</style>
